<template>
	<el-container class="login-bg">
		<el-row class="login-container" type="flex" align="middle">

			<el-col :span='12' class="login-left">
				<div class="logo">
					<h2>经典的、永恒的、奔腾不息的驰骋BPM...</h2>
				</div>
				<div class="left-box">
					<el-image style="width:60%" :src="require('../../../public/img/ccbpm.png')"></el-image>
					<h2>工作流\表单中间件-低代码平台</h2>
					<ul>
						<li>技术选型：vue2.0 </li>
						<li>官网:<a href="http://ccflow.org?frm=client" target="_blank"> http://ccflow.org</a></li>
						<li>地址：济南市.高新区.碧桂园凤凰国际A座F19</li>
						<li>电话：0531-82374939,18660153393(微信)</li>
						<li>版权：济南驰骋信息技术有限公司 @2003-2022</li>

						<li><a href="http://help.jflow.cn:8081/" target="_blank"> 流程设计器登录</a></li>

					</ul>
				</div>
			</el-col>
			<el-col :span='12' class="login-right">
				<el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left"
					label-width="0px" class="demo-ruleForm login-page my-auto">
					<h3 class="title ">用户端登录 - Vue</h3>
					<el-form-item prop="username">
						<el-input type="text" v-model="ruleForm2.username" auto-complete="off"
							placeholder="用户名，管理员admin"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="ruleForm2.password" auto-complete="off"
							placeholder="密码，默认123"></el-input>
					</el-form-item>
					<el-form-item style="width:100%;">
						<el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录 -
							流程中间件 - 用户端</el-button>
					</el-form-item>
					<el-divider content-position="center" class="gray" hidden="hidden">其他登录</el-divider>
					<el-row style="text-align: center;">

						<el-button type="primary" onclick="alert('未实现');" icon="iconfont icon-qq" circle></el-button>
						<el-button type="success" onclick="alert('未实现');" icon="iconfont icon-weixin" circle>
						</el-button>
						<el-button type="danger" onclick="alert('未实现');" icon="iconfont icon-zhifubaozhifu" circle>
						</el-button>


					</el-row>
				</el-form>

			</el-col>
		</el-row>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				logining: false,
				show: true,
				ruleForm2: {
					username: 'admin',
					password: '123',
				},
				rules2: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				checked: false
			}
		},
		created() {

			// var baby=new test();
			// this.$router.push("myFlow?FK_Flow=350");

		},
		methods: {
			handleSubmit() {
				var handler = new this.HttpHandler("BP.WF.HttpHandler.WF_AppClassic");
				handler.AddPara("TB_No", this.ruleForm2.username);
				handler.AddPara("TB_PW", this.ruleForm2.password);
				var data = handler.DoMethodReturnString("Login_Submit");
				if (data.includes("err")) {
					this.$message.error('登录失败');
					return;
				}
				this.$router.push({
					path: '/start'
				});
			}
		},

	};
</script>

<style scoped>
	.my-auto {
		margin-top: auto;
		margin-bottom: auto;
	}

	.login-bg {
		min-height: 100%;
	}

	.logo {
		display: flex;
		position: fixed;
		top: 0;
		color: #fff;
	}

	.login-bg:before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin-left: -48%;
		background-image: url(https://vvbin.cn/next/assets/login-bg.b9f5c736.svg);
		background-position: 100%;
		background-repeat: no-repeat;
		background-size: auto 100%;
		content: ""
	}

	.left-box {
		color: #fff;
		width: 70%;
		padding: 2rem;
		margin: 0 auto;
	}

	.title {
		font-size: 2.575rem;
		font-weight: 700;
	}

	.login-container {
		width: 100%;
		padding: 2rem;

	}

	.login-left {
		display: flex;
	}

	.login-right {
		display: flex;
	}

	.login-page {
		width: 70%;
		padding: 2rem;
		margin: 0 auto;


	}

	label.el-checkbox.rememberme {
		margin: 0px 0px 15px;
		text-align: left;
	}

	.el-input__inner,
	.el-button {
		border-radius: 0px;
	}

	.el-divider__text {
		color: #999;
	}
</style>
